<template>
  <a-modal
    width="50%"
    class="modal"
    v-model="isModel"
    :footer="null"
    :mask="false"
    :closable="false"
    :dialogStyle="{ top: `${y}px` }"
  >
    <!-- 头部 -->
    <div class="core">
      <a-row>
        <a-col :span="10"> 列展示 </a-col>
        <a-col :span="8"> 前/后移 </a-col>
        <a-col :span="6"> 固定左/右 </a-col>
      </a-row>
    </div>

    <!-- 表格列 -->
    <div class="core listBox">
      <div :key="updateKey" class="core_column">
        <a-row class="core_row" v-for="(item, index) in columnList" :key="item.title">
          <a-col :span="10">
            <a-checkbox :checked="item.status" @click="onChange(item)">
              {{ item.title }}
            </a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-row>
              <a-col :span="8">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>前移</span>
                  </template>
                  <img
                    v-show="index != 0"
                    @click="onFrontMove(item.title, index)"
                    src="@/assets/icons/table/table_front.png"
                    alt="前移"
                  />
                </a-tooltip>
              </a-col>
              <a-col :span="8">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>后移</span>
                  </template>
                  <img
                    v-show="index != columnList.length - 1"
                    @click="onBehindMove(item.title, index)"
                    src="@/assets/icons/table/table_behind.png"
                    alt="后移"
                  />
                </a-tooltip>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="6">
            <a-row>
              <a-col :span="12">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>固定左侧</span>
                  </template>
                  <img
                    v-if="item.fixed == 'left'"
                    @click="onRegular(item.title, 'left', true)"
                    src="@/assets/icons/table/table_left_active.png"
                    alt="固定左"
                  />
                  <img
                    v-else
                    @click="onRegular(item.title, 'left', false)"
                    src="@/assets/icons/table/table_left.png"
                    alt="固定左"
                  />
                </a-tooltip>
              </a-col>
              <a-col :span="12">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>固定右侧</span>
                  </template>
                  <img
                    v-if="item.fixed == 'right'"
                    @click="onRegular(item.title, 'right', true)"
                    src="@/assets/icons/table/table_right_active.png"
                    alt="固定右"
                  />
                  <img
                    v-else
                    @click="onRegular(item.title, 'right', false)"
                    src="@/assets/icons/table/table_right.png"
                    alt="固定右"
                  />
                </a-tooltip>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>
    </div>
  </a-modal>
</template>
<script>
import { getCache, setCache } from '@/utils/cache.js'
export default {
  props: {
    ucolumns: {
      type: Array,
      require: false,
    },
  },
  data() {
    return {
      sortMap: {},
      originalList: [], // 父组件原始表头数据
      updateKey: 0, // 列表刷新key
      columnList: [], // 子组件复制的列头数据
      y: 200, //top y
      x: 10,
      isModel: false,
    }
  },
  created() {
    // 把排序方法存起来
    this.ucolumns.forEach((v) => {
      if (v.sorter) {
        this.sortMap[v.title] = v.sorter
      }
    })
    // console.log('this.ucolumns', this.ucolumns)
    this.originalList = JSON.parse(JSON.stringify(this.ucolumns))

    let tempColumn = getCache(this.$route.name)
    // 从缓存中去, 有就回显缓存
    if (tempColumn) {
      this.$emit('f_setColumns', this.setSort(JSON.parse(JSON.stringify(tempColumn))))
      this.dataInit()
      // 有缓存初始化完后, 把缓存中不存在的项变为不勾选
      let tempArr = []
      tempColumn.forEach((v) => {
        tempArr.push(v.title)
      })
      this.columnList.forEach((v) => {
        if (!tempArr.includes(v.title)) {
          v.status = false
        }
      })
    } else {
      this.dataInit()
    }
  },
  methods: {
    // 回显排序方法 (json转对象函数类型字段会丢失)
    setSort(list) {
      list.forEach((v) => {
        if (v.title in this.sortMap) {
          v.sorter = this.sortMap[v.title]
        }
      })
      return list
    },
    // 父组件调用重置表头
    f_resetting() {
      this.dataInit()
      this.updateKey++
      setCache(this.$route.name, this.originalList)
      this.$emit('f_setColumns', this.setSort(JSON.parse(JSON.stringify(this.originalList))))
    },
    // 页面数据初始化
    dataInit() {
      this.columnList = JSON.parse(JSON.stringify(this.originalList))
      this.columnList.forEach((v) => {
        v.status = true
      })
    },
    // 列固定
    onRegular(key, value, status) {
      for (let v of this.columnList) {
        if (v.title == key) {
          if (status) {
            // 固定了的清除固定
            delete v.fixed
          } else {
            // 没固定的固定
            v.fixed = value
          }
          break
        }
      }
      // console.log('this.columnList', this.columnList)
      this.screenList(this.columnList)
    },
    // 列点击后移
    onBehindMove(key, index) {
      let temp = this.columnList[index]
      this.columnList[index] = this.columnList[index + 1]
      this.columnList[index + 1] = temp
      this.screenList(this.columnList)
    },
    // 列点击前移
    onFrontMove(key, index) {
      let temp = this.columnList[index]
      this.columnList[index] = this.columnList[index - 1]
      this.columnList[index - 1] = temp
      this.screenList(this.columnList)
    },
    // 单选点击触发
    onChange(item) {
      item.status = !item.status
      // 找选中的列, 触发父组件的回调
      this.screenList(this.columnList)
    },
    // 筛选数据
    screenList(list) {
      let columns = []
      list.forEach((v) => {
        if (v.status) {
          columns.push(v)
        }
      })
      this.updateKey++
      // 存入到缓存
      setCache(this.$route.name, columns)
      this.$emit('f_setColumns', this.setSort(JSON.parse(JSON.stringify(columns))))
    },
    // 父组件调用初始化
    f_init(e) {
      this.y = e.pageY + 20
      this.isModel = true
      // console.log('columnList', this.columnList)
    }
  },
}
</script>

<style lang="less" scoped>
::v-deep .zoom-leave,
::v-deep .zoom-enter,
::v-deep .zoom-leave-active {
  -webkit-animation-duration: 0s !important;
  animation-duration: 0s !important;
  position: fixed;
  right: 0px;
  animation-play-state: paused !important;
  animation-fill-mode: forwards !important;
}
::v-deep .ant-modal-body {
  // border: 1px solid red;
  padding: 10px 0 10px 10px;
}
::v-deep .ant-modal-content {
  position: fixed;
  right: 60px;
  width: 340px;
  height: 200px;

  // border: 1px solid blue;
}
.listBox {
  height: 200px;
}
.core {
  &_column {
    // border: 1px solid red;
    margin-top: 6px;
    padding-top: 6px;
    height: 74%;
    border-top: 1px solid #eee;
    overflow: auto;
  }

  &_row:hover {
    background-color: rgb(221, 238, 250);
    cursor: pointer;
  }
}
</style>
